<template>
  <div>
    <div class="title">本月护栏碰撞统计</div>
    <div class="content-container" ref="chartBar"></div>
  </div>
</template>

<script>
  import $ from 'jquery';
  import _ from 'lodash';
  import highcharts from 'highcharts';

  import * as Constant from './common/Constant';
  import highchartConfig  from './chartConfig/HighchartConfig';
  import testData from './common/TestData';

    export default {
        name: 'CollisionMonth',
        data() {
            return {
              chartDataBar:{},
              chartBar:null,
            }
        },
        computed: {},
        methods: {
          updateChart(){
            let me = this;

            if(!this.chartBar){
              this.chartBar = highcharts.chart(this.$refs.chartBar, this.chartDataBar)
            }else{
              this.chartBar.series[0].setData(this.chartDataBar.series[0].data)
            }

            setTimeout(me.getData, Constant.INTERVAL*1000)
          },
          getData(){
            let me = this;

            let configDataBar = {
              legend: ["次数"],
              xAxis:[],
              data:[],
              colors: ['#56D9FF'],
              showLegend: false,
            }

            if(Constant.LOCAL){
              let data = [["2018-06-01",14], ["2018-06-18",20]];
              configDataBar.xAxis =  _.map(data,"0");
              configDataBar.data = [_.map(data, "1")];
              me.chartDataBar = highchartConfig.getBarConfig(configDataBar)
              me.updateChart();
            }else{
              $.get(Constant.HOST+'fiber/getVibraInfoForMonth').then(data=>{
                configDataBar.xAxis =  _.map(data,"0");
                configDataBar.data = [_.map(data, "1")];
                me.chartDataBar = highchartConfig.getBarConfig(configDataBar)
                me.updateChart();
              }).fail(()=>{
                setTimeout(me.getData, Constant.INTERVAL*1000)
              })
            }
          }
        },
        mounted() {
          this.getData();
        },
        created() {

        }
    }
</script>

<style lang="stylus" scoped>
  .content-container
    margin-top: 20px
</style>
